<template>
  <Table :tableData="tableData" max-height="500px"
         border
         :headerStyle="{backgroundColor:'#fffbed'}" :table-column="tableColumn" :page="false">
    <template slot="payType" slot-scope="{row}">
      {{ row.payType === 1 ? $t('还款') : $t('展期') }}
    </template>
  </Table>
</template>

<script>
import {virtualListRecord} from "@/api/pay";

export default {
  props:['routesQuery'],
  name: "virtualCardRecord",
  data() {
    return {
      tableData: [],
      tableColumn: [
        {label: this.$t('虚拟卡用途'), prop: 'payType', align: 'center', minWidth: 100, slot: 'payType'},
        {label: this.$t('银行账号'), prop: 'accNo', align: 'center', minWidth: 100},
        {label: this.$t('银行卡账户名称'), prop: 'accName', align: 'center', minWidth: 100},
        {label: this.$t('银行名称'), prop: 'bankName', align: 'center', minWidth: 100},
        {label: this.$t('支行名称'), prop: 'bankBranch', align: 'center', minWidth: 100},
        {label: this.$t('创建时间'), prop: 'creationTime', align: 'center', minWidth: 150},
        {label: this.$t('创建人'), prop: 'inputName', align: 'center', minWidth: 100},
        {label: this.$t('取消时间'), prop: 'cancelTime', align: 'center', minWidth: 150},
        {label: this.$t('取消人'), prop: 'cancelName', align: 'center', minWidth: 100},
        {label: this.$t('用户姓名'), prop: 'userName', align: 'center', minWidth: 100},
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const {orderId} = this.routesQuery
      const res = await virtualListRecord({
        loanRecordId: orderId
      })
      if (res.code === 1) {
        this.tableData = res.data
      }
    }
  }
}
</script>

<style scoped>

</style>
